import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { Heart, MessageCircle, Share2, Bookmark } from 'lucide-react';
import { supabase } from '../lib/supabase';
import type { Database } from '../lib/database.types';

type Poem = Database['public']['Tables']['poems']['Row'];

export function Home() {
  const [poems, setPoems] = useState<Poem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchPoems() {
      const { data, error } = await supabase
        .from('poems')
        .select('*')
        .order('created_at', { ascending: false })
        .limit(10);

      if (!error && data) {
        setPoems(data);
      }
      setLoading(false);
    }

    fetchPoems();
  }, []);

  if (loading) {
    return <div className="text-center py-12">加载中...</div>;
  }

  return (
    <div>
      {/* Hero Section */}
      <div className="text-center mb-12">
        <h2 className="text-4xl font-bold text-gray-900 mb-4">传承古典诗词之美</h2>
        <p className="text-lg text-gray-600">分享、探讨、传承中国传统诗词文化</p>
      </div>

      {/* Poems List */}
      <div className="grid gap-8">
        {poems.map((poem) => (
          <article key={poem.id} className="bg-white rounded-lg shadow-md overflow-hidden">
            <div className="p-6">
              <Link to={`/poem/${poem.id}`}>
                <h3 className="text-xl font-bold text-gray-900 hover:text-emerald-600">
                  {poem.title}
                </h3>
              </Link>
              <p className="text-gray-600 mt-1">
                {poem.dynasty && `${poem.dynasty}代 · `}{poem.poet || '佚名'}
              </p>
              <div className="whitespace-pre-line text-lg text-gray-800 my-4 font-serif">
                {poem.content}
              </div>
              <div className="flex items-center space-x-6 text-gray-500">
                <button className="flex items-center space-x-2 hover:text-emerald-600">
                  <Heart className="h-5 w-5" />
                </button>
                <button className="flex items-center space-x-2 hover:text-emerald-600">
                  <MessageCircle className="h-5 w-5" />
                </button>
                <button className="flex items-center space-x-2 hover:text-emerald-600">
                  <Share2 className="h-5 w-5" />
                </button>
                <button className="flex items-center space-x-2 hover:text-emerald-600">
                  <Bookmark className="h-5 w-5" />
                </button>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}